<template>
    <div class="login_container">
      <div class="login_box">
        <!--头像区域-->
        <div class="avatar_box">
          <img v-bind:src="imgLogo">

        </div>
         <!--登陆表单区域,直接复制-->
        <!--这边:model是要进行数据绑定的，它是数据对象，要在data中进行定义-->
        <!--:rules表示验证规则，可以为不同表单项加prop进行验证-->
        <el-form :model="loginForm" :rules="rules" ref="loginFormRef"  label-width="0px" class="login_form">
          <!--户名,并且导入第三方字体图标-->
          <!-- 注意prop名是用来进行登陆前验证的，名字要和data中的名字相同-->
          <!--导入字体图标用的是阿里的字体图标，需要先在main.js导入iconfont.css-->
          <el-form-item prop="username">
            <!--用v-model进行数据绑定-->
            <el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input>
          </el-form-item>

          <!-- 密码：prop表示要进行验证-->
          <el-form-item prop="password">
            <el-input  type="password" v-model="loginForm.password"  prefix-icon="iconfont icon-3702mima"></el-input>
          </el-form-item>
          <!--按钮-->
          <el-form-item class="btns">
            <el-button type="success" @click="login">登录</el-button>
            <el-button type="primary" @click="resetRef">重置</el-button>
          </el-form-item>

        </el-form>


      </div>

    </div>
</template>

<script>
  export default {
    name: 'Login',
    data(){
      return{
        //这是登陆表单的数据对象
        loginForm:{
          username:'admin',
          password:'123456'
        },
        //require是避免图片src显示不出来
        imgLogo:require('./../assets/logo.png'),
        //验证规则：注意是放在data中，elementui
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 15, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],

        }
      }
    },
    methods:{
      //重置表单内容
      //最后内容就是data中绑定的值，不一定会清空表单
      resetRef(){
        console.log(this)
        //表单要自己定义一个ref
        this.$refs.loginFormRef.resetFields();
      },
      login(){
        //登陆前的预验证，就是看输入是否符合规则，返回true/false，符合规则再去查询数据库
        //validate这个是element ui提供的
        this.$refs.loginFormRef.validate(async valid=>{
          if(!valid){
            return;
          }
          //在main.js中配置过axios，和url基础，还有第二个参数为上面data里的用户名和密码
          //如果方法的返回值是Promise,log打印时会出现，则用await和async进行简化，这样可以直接获取data
          //{data:res}，解构赋值，获取若干个属性中的data属性，并改名为res
          const {data:res}=await this.$http.post("login",this.loginForm)
          //弹窗是element ui组件
          if(res.meta.status !== 200) return this.$message.error("登陆失败！")
              this.$message.success("登陆成功")
              //接下来保存登陆后的信息token.登陆成功跳转页面后可以在f12的application的sessionStorage里找到
              //这是会话式保存，比较好用
              window.sessionStorage.setItem("token",res.data.token)
              //2、通过编程导航跳转到后台主页，路由地址是/home，await是提示加的
              await this.$router.push("/home")
        })
      }
    }
  }
</script>

<style lang="less" scoped>
.login_container{
  background-color: #2b4b6b;
  /*让背景色撑满全屏*/
  height: 100%;
}
  /*登录大盒子，在页面水平垂直居中*/
  .login_box{
    width: 450px;
    height: 300px;
    background-color: #fff;
    border-radius: 3px;
    /*这几条语句能让盒子移到正中*/
    position: absolute;
    left: 50%;
    top: 50%;
    transform:translate(-50%,-50%) ;
  }

  /*图片父盒子*/
  .avatar_box{
    height: 130px;
    width: 130px;
    border: 1px solid #eee;
    /*父盒子变成圆角*/
    border-radius: 50%;
    /*图片和盒子内边距*/
    padding: 10px;
    box-shadow: 0 0 #eee;
    /*移动要加上position:absolute*/
    position: absolute;
    left: 50%;
    transform:translate(-50%,-50%) ;
    background-color: #fff;
    img{
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #eee;
    }
  }
.login_form{
  position: absolute;
  /*登录盒子距离底部对齐*/
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  /*重要：避免加内边距后超出盒子范围*/
  box-sizing: border-box;
}
  /*设置登录重置按钮水平居中对齐*/
  .btns{
    display: flex;
    justify-content: center;
  }

</style>
